<template>
  <div class="full">
    <div class="container">
      <div class="full-secondtitle">
        <div class="h1">设备在线率统计</div>
      </div>
    </div>
    <div class="cht12">
      <v-chart id="chart12" ref="chart12" class="chart12" :option="option12" />
    </div>
    <div class="container">
      <div class="full-secondtitle">
        <div class="h1">监测设备工作状态</div>
      </div>
    </div>
    <div class="flex-container-th">
      <div class="thr-item2">
        <div class="thr-item2-1">
          <div class="thr-item2-1-1"></div>
          <div class="thr-item2-1-2">正常</div>
          <div class="thr-item2-1-3">土壤监测设备</div>
        </div>
        <div class="thr-item2-1">
          <div class="thr-item2-1-1"></div>
          <div class="thr-item2-1-2">正常</div>
          <div class="thr-item2-1-3">气象监测设备</div>
        </div>
        <div class="thr-item2-1">
          <div class="thr-item2-1-1"></div>
          <div class="thr-item2-1-2">正常</div>
          <div class="thr-item2-1-3">水质监测设备</div>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="full-secondtitle">
        <div class="h1">告警记录</div>
      </div>
    </div>
    <div class="flex-container-th">
      <div class="cht13">
        <v-chart
          id="chart13"
          ref="chart13"
          class="chart13"
          :option="option13"
        />
      </div>
    </div>
  </div>
</template>

<script>
// var chartDom = document.getElementById("main");postall
// var myChart = echarts.init(chartDom);
import * as echarts from "echarts";
import { ref, onMounted, watch } from "vue";
import axios from "axios";

export default {
  data() {
    return { option12: {}, option13: {} };
  },
  setup() {},
  mounted() {
    const gaugeData = [
      {
        value: 100,
        name: "监测设备在线率",
      },
    ];
    this.option12 = {
      color: ["#00a3d0"],
      series: [
        {
          type: "gauge",
          startAngle: 90,
          endAngle: -270,
          pointer: {
            show: false,
          },
          progress: {
            show: true,
            overlap: false,
            roundCap: true,
            clip: false,
          },
          axisLine: {
            lineStyle: {
              width: 15,
            },
          },
          axisTick: {
            distance: -35,
            splitNumber: 5,
            lineStyle: {
              width: 3,
              color: "#999",
            },
          },
          splitLine: {
            show: false,
            distance: 0,
            length: 10,
          },
          axisLabel: {
            show: false,
            distance: 50,
          },
          data: gaugeData,
          title: {
            offsetCenter: ["-130", "-70"],
            fontSize: 14,
            fontweight: 400,
            color: "#88A0BF",
          },
          detail: {
            width: 50,
            height: 14,
            fontSize: 36,
            color: "#ffffff",
            valueAnimation: true,
            formatter: "{value}%",
            offsetCenter: ["0%", "0%"],
          },
        },
      ],
    };
    const result = [
      { value: 10, name: "1111" },
      { value: 5, name: "222" },
    ];
    this.option13 = {
      // 根据需要配置echarts的option
      backgroundColor: "transparent",
      color: ["#f00909", "#88f009"],
      tooltip: {
        trigger: "item",
        textStyle: {
          fontSize: 16, // 设置图例文字大小
        },
      },
      series: [
        {
          name: "事件类型",
          type: "pie",
          radius: [35, 65],
          // roseType: "radius",
          data: result,
          label: {
            color: "#ffffff",
            // alignTo: "edge",
            formatter: function (params) {
              var percent = ((params.value / 15) * 100).toFixed(0);
              return percent + "%" + "\n" + params.name;
            },
            // minMargin: 50,
            edgeDistance: 10,
            lineHeight: 18,
            fontSize: 16,
            rich: {
              time: {},
            },
          },
          labelLine: {
            length: 10,
            length2: 50,
          },
          // labelLayout: {
          //   // X: "50%",
          //   // align: "center",
          //   // verticalAlign: "middle",
          //   // labelRect: { x: 20, y: 20, width: 20, height: 20 },
          // },
          // labelLayout: function (params) {
          //   const isLeft = params.labelRect.x < chart1.value.getWidth() / 2;
          //   const points = params.labelLinePoints;
          //   // Update the end point.
          //   points[2][0] = isLeft
          //     ? params.labelRect.x
          //     : params.labelRect.x + params.labelRect.width;
          //   return {
          //     labelLinePoints: points,
          //   };
          // },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
      ],
    };
    this.renderChart(); // 渲染图表
  },
  methods: {
    renderChart() {
      const myChart12 = echarts.init(document.getElementById("chart12")); // 初始化echarts图表
      myChart12.setOption(this.option12); // 设置图表的配置项
      const myChart13 = echarts.init(document.getElementById("chart13")); // 初始化echarts图表
      myChart13.setOption(this.option13); // 设置图表的配置项
    },
  },
};
</script>
<style scoped>
.full {
  display: flex;
  flex-direction: column;
  width: 25rem;
  /* background-color: #e62f29; */
}
.container {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.full-secondtitle {
  display: flex;
  align-items: center;
  background-color: #ffffff70;
  padding: 0.3rem 1rem;
}
.full-secondtitle .h1 {
  line-height: 1;
  font-size: 1.4rem;

  font-weight: 600;
  color: #ffffff;
}

.flex-container-th {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
  width: 25rem;
  border: 0.08rem solid rgba(255, 255, 255, 0.575);
}
.cht12 {
  width: 25rem;
  height: 12.5rem;
  border: 0.08rem solid rgba(255, 255, 255, 0.575);
}
.chart12 {
  width: 25rem;
  height: 12.5rem;
}
.cht13 {
  width: 25rem;
  height: 12.5rem;
  border: 0.08rem solid rgba(255, 255, 255, 0.575);
}
.chart13 {
  width: 25rem;
  height: 12.5rem;
}
.thr-item2 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 2rem 0.5rem;
  gap: 1rem;
}
.thr-item2-1 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 7.25rem;
  height: 9.8rem;
  background-image: url("../assets/物联网右2背景.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.thr-item2-1-1 {
  width: 6rem;
  height: 5.3rem;
  background-image: url("../assets/土堆.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.thr-item2-1-2 {
  font-size: 2rem;
  font-family: MiSans;
  font-weight: 800;
  color: #1dfe3e;
}
.thr-item2-1-3 {
  font-size: 1rem;

  font-weight: 400;
  color: #ffffff;
  margin-bottom: 0.6rem;
}
</style>